<template>
  <div class="app-container">
    <!--选择仓库-->
    <SelectWarehouse ref="openSelectWarehouse"  @warehouseSelected="warehouseSelected"></SelectWarehouse>
    <!-- 货物入仓/现场入仓 -->
    <div class="detail-title-box">
      <span>详情信息</span>
    </div>
    <el-form ref="ruleForm" :model="ruleForm" size="small" :inline="true" :rules="rules" label-width="120px" :label-position="labelPosition">
      <el-form-item label="客户" prop="khmc" :rules="rules.khmc">
        <el-input
            v-model="ruleForm.khmc"
            :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="仓库" prop="spckmc" :rules="rules.spckmc">
        <el-input
            v-model="ruleForm.spckmc"
            :disabled="true"
            style="width:205px"
        >
            <el-button slot="append" @click="warehouseSelect">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="外部单号" prop="wbdh">
        <el-input
          v-model="ruleForm.wbdh"
          placeholder="请输入外部单号"
          clearable
        />
      </el-form-item>
      <el-form-item label="车牌" prop="dzzy6" :rules="rules.dzzy6">
        <el-input
          v-model="ruleForm.dzzy6"
          placeholder="请输入车牌"
          clearable
        />
      </el-form-item>
      <el-form-item label="司机" prop="dzzy7" :rules="rules.dzzy7">
        <el-input
          v-model="ruleForm.dzzy7"
          placeholder="请输入司机姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="电话" prop="dzzy8">
        <el-input
          v-model="ruleForm.dzzy8"
          placeholder="请输入电话"
          clearable
        />
      </el-form-item>
      <el-form-item label="身份证" prop="dzzy10">
        <el-input
          v-model="ruleForm.dzzy10"
          placeholder="请输入身份证"
          clearable
        />
      </el-form-item>
      <el-form-item label="备注" prop="dzbz">
        <el-input
          v-model="ruleForm.dzbz"
          placeholder="请输入备注"
          clearable
        />
      </el-form-item>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAddRow" >增加行</el-button>
      </el-col>
    </el-row>
      <el-table
        :data="ruleForm.inp"
        row-key="spbhid"
        class="form-table"
      >
        <af-table-column width="60" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleRowDelete(scope.$index)"
            >删 除</el-button>
          </template>
        </af-table-column>
        <af-table-column width="170"  prop="ssrqid" label="入仓日期" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.ssrqid'" :rules="rules.inp.ssrqid">
              <el-date-picker
                v-model="scope.row.ssrqid"
                default-value
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                size="mini"
                style="width:90%">
              </el-date-picker>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spzs" label="物品规格" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spzs'" :rules="rules.inp.spzs">
              <el-input v-model="scope.row.spzs" size="mini" placeholder="请输入内容" />
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spbh" label="批号" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spbh'" :rules="rules.inp.spbh">
              <el-input v-model="scope.row.spbh" size="mini" placeholder="请输入内容"/>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spgh" label="柜号">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spgh'">
              <el-input v-model="scope.row.spgh" size="mini" placeholder="请输入内容" />
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spjs" label="件数" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spjs'" :rules="rules.inp.spjs">
              <el-input v-model="scope.row.spjs" size="mini" placeholder="请输入内容" @input="getWeight(scope.$index)" v-exactDecimal="numberDigit" type="number" min="0"/>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spjsl" label="单重(Kg)" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spjsl'" :rules="rules.inp.spjsl">
              <el-input v-model="scope.row.spjsl" size="mini" placeholder="请输入内容" @input="getWeight(scope.$index)" v-exactDecimal="weightDigit" type="number" min="0"/>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spsl" label="重量(吨)">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spsl'">
              <el-input  v-model="scope.row.spsl" size="mini" placeholder="请输入内容" :disabled="true"/>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spcd" label="品牌">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spcd'">
              <el-input v-model="scope.row.spcd" size="mini" placeholder="请输入内容" />
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="spcwid" label="选择仓位" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.spcwid'" :rules="rules.inp.spcwid">
              <el-select 
                v-model="scope.row.spcwid"
                size="mini"
                placeholder="请选择"
                :loading="warehouseInSelectPositionLoading"
                :disabled="true"
              >
                <el-option
                  v-for="item in warehouseSelectPositonList"
                  :key="item.liid"
                  :label="item.ckcw"
                  :value="item.liid">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggA" label="纱支" :render-header="addRedStar">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggA'" :rules="rules.inp.wpggA">
              <el-select v-model="scope.row.wpggA" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.a"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggB" label="工艺">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggB'">
              <el-select v-model="scope.row.wpggB" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.b"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggC" label="工序">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggC'">
              <el-select v-model="scope.row.wpggC" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.c"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggD" label="用途">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggD'">
                <el-select v-model="scope.row.wpggD" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.d"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggE" label="产地">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggE'">
              <el-select v-model="scope.row.wpggE" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.e"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggF" label="漂染性">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggF'">
                <el-select v-model="scope.row.wpggF" size="mini" placeholder="请选择" :loading="warehouseInDetailsDropDown1Loading">
                <el-option
                  v-for="item in warehouseInDetailsList.f"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="170" prop="wpggG" label="生产日期">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggG'">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="scope.row.wpggG"
                type="date"
                placeholder="生产日期"
                size="mini"
                style="width:90%">
              </el-date-picker>
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column width="150" prop="wpggH" label="颜色">
          <template slot-scope="scope">
            <el-form-item :prop="'inp.' + scope.$index + '.wpggH'">
              <el-input v-model="scope.row.wpggH" size="mini" placeholder="请输入内容" />
            </el-form-item>
          </template>
        </af-table-column>
        <af-table-column prop="itbz" label="备注">
            <template slot-scope="scope">
              <el-form-item :prop="'inp.' + scope.$index + '.itbz'">
                <el-input v-model="scope.row.itbz" size="mini" placeholder="请输入内容" />
              </el-form-item>
          </template>
        </af-table-column>
      </el-table>
      <el-row class="mt20" :gutter="20">
        <el-form-item label="件数">{{amountTotal}}</el-form-item>
        <el-form-item label="重量(吨)">{{weightTotal}}</el-form-item>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center" :gutter="5">
      <el-col :span="1.5">
        <el-button type="primary" @click="warehouseInSubmit('ruleForm')">添加</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button @click="goBack">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { warehouseInAdd, warehouseInSelectPosition, warehouseInDetailsDropDown1 } from "@/api/storage/commonGoods/warehouseIn";
import SelectWarehouse from './selectWarehouse.vue'
import { formatDate } from '@/utils'
import { NUMBER_DIDGIT, WEIGHT_DIGIT } from '@/utils/constant'

export default {
  name: "CSceneWarehouseIn",
  components: { SelectWarehouse },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      //仓位加载
      warehouseInSelectPositionLoading: true,
      //纱织加载
      warehouseInDetailsDropDown1Loading:true,
      //对齐方式
      labelPosition:"right",
      //件数精确小数位
      numberDigit:NUMBER_DIDGIT,
      weightDigit:WEIGHT_DIGIT,
      //选择仓位列表
      warehouseSelectPositonList:[],
      //纱支、工艺、工序、用途、产地、漂染性列表
      warehouseInDetailsList:[],
      //选择仓库入参
      selectPositionQuery:{
        spckid:""
      },
      //添加详情
      ruleForm:{
        dzbz: "",
        dzid: 0,
        dzzy10: "",
        dzzy6: "",
        dzzy7: "",
        dzzy8: "",
        iszxf: "",
        iszyl: "",
        khlx: "商城",
        khmc: "",
        khmcid: "",
        spckid: "",
        spckmc: "",
        szkhmc: "",
        wbdh: "",
        inp:[]
      },
      //校验
      rules: {
        khmc:[{
          required: true,
          message: '客户不能为空',
          trigger: "blur"
        }],
        spckmc:[{
          required: true,
          message: '仓库不能为空',
          trigger: "blur"
        }],
        dzzy6:[{
          required: true,
          message: '车牌不能为空',
          trigger: "blur"
        }],
        dzzy7:[{
          required: true,
          message: '司机不能为空',
          trigger: "blur"
        }],
        inp:{
          spzs: [
            {
              required: true,
              message: '物品规格不能为空',
              trigger: "blur"
            }
          ],
          ssrqid: [
            {
              required: true,
              message: '入仓日期不能为空',
              trigger: "blur"
            }
          ],
          spbh: [
            {
              required: true,
              message: '批号不能为空',
              trigger: "blur"
            }
          ],
          spjs: [
            {
              required: true,
              message: '件数不能为空',
              trigger: "blur"
            }
          ],
          spjsl: [
            {
              required: true,
              message: '单重不能为空',
              trigger: "blur"
            }
          ],
          spcwid: [
            {
              required: true,
              message: '选择仓位不能为空',
              trigger: "blur"
            }
          ],
          wpggA: [
            {
              required: true,
              message: '纱支不能为空',
              trigger: "blur"
            }
          ],
        }
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    const query = to.query
    next(vm => {
      if(Object.keys(query).length > 0) {
        vm.ruleForm.khmc = query.spkhmc
        vm.ruleForm.khmcid = query.khmcid
        vm.warehouseInDetails()
        console.log('xxxx')
      }
    })
  },
  computed: {
    amountTotal() {
      let sum = 0
      const inp = this.ruleForm.inp
      for(let i in inp) {
        if(inp[i].spjs) {
          sum += parseFloat(inp[i].spjs)
        }
      }
      return parseFloat(sum.toFixed(NUMBER_DIDGIT))
    },
    weightTotal() {
      let sum = 0
      const inp = this.ruleForm.inp
      for(let i in inp) {
        if(inp[i].spsl) {
          sum += parseFloat(inp[i].spsl)
        }
      }
      return parseFloat(sum.toFixed(WEIGHT_DIGIT))
    },
  },
  methods: {
    /**选择仓位 */
    selectPosition() {
      this.warehouseInSelectPositionLoading= true
      warehouseInSelectPosition(this.selectPositionQuery).then(response => {
        this.warehouseSelectPositonList = response.data
        this.warehouseInSelectPositionLoading= false
      });
    },
    /**选择纱织 */
    warehouseInDetails() {
      this.warehouseInDetailsDropDown1Loading= true
      warehouseInDetailsDropDown1({}).then(response => {
        this.warehouseInDetailsList = response.data;
        this.warehouseInDetailsDropDown1Loading= false
      })
    },
    /**添加行 */
    handleAddRow() {
      if(!this.ruleForm.khmc) return this.$modal.msgError("请选择客户！")
      if(!this.ruleForm.spckmc) return this.$modal.msgError("请选择仓库！")
      if(!this.ruleForm.inp) return this.$modal.msgError('请添加行！')
      const nowDate = formatDate(Date.now()).split(" ")[0]
      const spcwid = this.warehouseSelectPositonList && this.warehouseSelectPositonList.length > 0?this.warehouseSelectPositonList[0].liid:''
      const row = {
        ssrqid:nowDate,
        spzs: "",
        spbh: "",
        spgh:"",
        spjs: "",
        spjsl: "",
        spsl: "",
        spcd: "",
        spcwid: spcwid,
        spmc:"",
        wpggA: "",
        wpggB: "",
        wpggC: "",
        wpggD: "",
        wpggE: "",
        wpggF: "",
        wpggG: "",
        wpggH: "",
        itbz: "",
      }
      this.ruleForm.inp.push(row)
    },
    /**计算重量 */
    getWeight(index) {
      const r = this.ruleForm.inp[index]
      r.spsl = parseFloat((r.spjs*r.spjsl/1000).toFixed(WEIGHT_DIGIT))
    },
    addWarehouseIn() {
      this.$modal.loading("数据正在加载中，请稍等...")
      warehouseInAdd(this.ruleForm).then(response => {
        this.$modal.closeLoading()
        this.$modal.msgSuccess('添加成功')
        this.goWarehouseIn()
      }).catch(()=> {
        this.$modal.closeLoading()
      });
    },
    /**新增货物 */
    warehouseInSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if(this.ruleForm.inp.length > 100) return this.$modal.msgError("货物行数不能大于100行！")
          if(this.ruleForm.inp.length === 0) return this.$modal.msgError("请先输入数据！")
          return this.$modal.confirm("提交前请确保信息正确！是否确认提交？").then(() => {
              this.addWarehouseIn()
            }).catch(()=> {})
        } else {
          return false
        }
      })
    },
    /** 添加行删除*/
    handleRowDelete(index) {
      this.ruleForm.inp.splice(index, 1)
    },
    /**选择仓库 */
    warehouseSelect() {
        this.$refs.openSelectWarehouse.open('selectWarehouse1')
    },
    /**选中仓库 */
    warehouseSelected(row) {
      this.ruleForm.spckmc = row.spckmc
      this.ruleForm.shengyu = row.shengyu
      this.selectPositionQuery.spckid = row.spckid
      this.ruleForm.spckid = row.spckid
      this.ruleForm.spckmc = row.spckmc
      this.selectPosition()
    },
    //跳回货物入仓页
    goWarehouseIn() {
      this.$tab.closePage(this.$route)
      this.$router.push({name:"CWarehouseIn", params:{refresh:true}})
    },
     // 给表头加必填符号*
     addRedStar(h, { column }) {
      return [
        h("span", { style: "color: red" }, "*"),
        h("span", " " + column.label),
      ];
    },
    /**重置 */
    // reset(vm) {
    //   Object.assign(vm.$data, vm.$options.data())
    // },
    /**返回不刷新 */
    goBack() {
      this.$router.push({name:"CWarehouseIn"})
    },
  }
};
</script>
